<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		header{
			width: 1000px;
			height: 130px;
			border: 5px solid dodgerblue;
			margin: 0 auto;
		}
		nav{
			width: 1000px;
			height: 40px;
			margin: 5px auto;
			border: 5px solid orangered;
		}
		nav a{
			float: left;
			text-decoration: none;
			line-height: 40px;
			font-size: 20px;
			color: #333;
			padding: 0 15px;
		}
		#main{
			width: 1000px;
			height: 400px;
			/*border: 3px solid black;*/
			margin: 0 auto;
		}
		#main aside{
			width: 220px;
			height: 400px;
			background: greenyellow;
			float: left;
		}
		#main article{
			float: right;
			width: 770px;
			height: 400px;
			background: deeppink;
		}
		footer{
			width: 1000px;
			height: 150px;
			border: 5px solid green;
			margin: 5px auto;
		}
	</style>
	</head>
	<body>
		<!--头部-->
		<header>
			头部 header标签
		</header>
		<!--头部结束-->
		
		<!--导航条-->
		<nav>
			<a href="">后盾人</a>
			<a href="">后盾人</a>
			<a href="">后盾人</a>
			<a href="">后盾人</a>
			<a href="">后盾人</a>
			<a href="">后盾人</a>
		</nav>
		<!--导航条结束-->
		
		<!--中间大区域-->
		<div id="main">
			<!--侧边栏-->
			<aside>
				请选择地区：
				<br />
				<select>
					<optgroup label="山东省">
						<option>济南</option>
						<option>青岛</option>
						<option>济宁</option>
					</optgroup>
					<optgroup label="河北省">
						<option>石家庄</option>
						<option>邯郸</option>
						<option>保定</option>
						<option>廊坊</option>
					</optgroup>
					
				</select>
				
				<!--进度条-->
				<progress max="100" value="90"></progress>
				
				<meter min="0" max="100" low="30" high="80" value="95"></meter>
				
			</aside>
			<!--侧边栏结束-->
			<article>
				<h1>各种水果的优点解析</h1>
				发表时间：<time pubdate="2017-3-1">2017-3-1</time>
				<!--<time datetime="2018-6-6">2018年6月6日</time>大家都去开会啊!-->
				<section>
					<h2>苹果</h2>
					<p>苹果如果熟的话就好吃，<mark>不熟就不好吃</mark>.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，<ins>不熟就不好吃</ins>.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，<del>不熟就不好吃</del>.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，不熟就不好吃.苹果如果熟的话就好吃，不熟就不好吃.</p>
				</section>
				
				<section>
					<h2>葡萄</h2>
					<p>吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮！</p>
				</section>
				
			</article>
		</div>
		<!--中间大区域结束-->
		
		<footer>底部footer标签
			<address>北京朝阳区孙河顺白路12号后盾IT教育楼</address>
			<code>alert('你好');</code>
		</footer>
		
		
	</body>
</html>


